<template>
  <div>
      <header></header>
      <main>
        <div class="home_ser">
          <span class="local">
            <van-dropdown-menu class="sousuo">
            <van-dropdown-item v-model="value1" :options="option3" />
            </van-dropdown-menu></span>
          <van-icon class="moreAdd" name="add" />
        </div>
        
        <input class="search" type="text" placeholder="搜索">
        
        <van-swipe :autoplay="2000" indicator-color="white" :height="111">
           <van-swipe-item><img src="../images/board2.png" alt=""></van-swipe-item>
           <van-swipe-item><img src="../images/board3.png" alt=""></van-swipe-item>
           <van-swipe-item><img src="../images/Superbanner.png" alt=""></van-swipe-item>
           
        </van-swipe>
        <div class="memberCard">
          <div class="card_left">
          </div>
          <img src="../images/person.png" alt="">
        </div>
        <div class="category">
          <router-link :to="'/category/prolist/'+item.id" v-for="(item,i) in categoryList" :key="i">
            <figure>
              <img :src="item.coverImg" alt="">
              <figcaption>{{item.categoryName}}</figcaption>
            </figure>
          </router-link>
        </div>
        <div class="specialOffer">
          <div class="title">
              <h2>今日特价</h2>
              <router-link to="/todayoffer/5dbc18b5440b810ee8ed769f" tag="p">查看更多&nbsp;&gt;</router-link>
              
           </div>
           <div class="title-content">
              <dl v-for="(item,i) in specialToday" :key="i">
                <router-link tag="dt" :to="`/detail/${item._id}`"><van-image width="80" height="60" :src="item.coverImg"
/></router-link>
                <dd class="van-ellipsis">{{item.name }}</dd>
                <dd>每组500g</dd>
                <dd><p><b>￥{{item.price}}</b>/组</p><van-icon name="add" @click="addcart(item._id)"/></dd>
              </dl>
            </div>

        </div>
        <div class="big_sales">
          <div class="top_1">
            <dl>
              <router-link :to="`/todayoffer/${id1}`" tag="dt">最大折扣</router-link>
              <dd>最低低至一折</dd>
              <dd>
                <router-link tag="span" :to="`/detail/${item._id}`" v-for="(item,i) in specials" :key="i">
                  <img :src="item.coverImg"/>
                </router-link>
              </dd>
            </dl>
            <dl>
              <router-link :to="`/todayoffer/${id2}`" tag="dt">低价专区</router-link>
              <dd>最低1元起</dd>
              <dd>
                <router-link tag="span" :to="`/detail/${item._id}`" v-for="(item,i) in lows" :key="i">
                  <img :src="item.coverImg"/>
                </router-link>
              </dd>
            </dl>
          </div>
          <div class="top_2">
            <dl class="shops">
              <router-link :to="`/todayoffer/${id3}`" tag="dt">每日好店</router-link>
              <dd>好评最多</dd>
              <dd>
                <router-link tag="span" to="/superm_shop/5dc37b8b289c25084044361a" v-for="(item,i) in shops" :key="i">
                  <img :src="item.coverImg"/>
                </router-link>
              </dd>
            </dl>
            <dl>
              <router-link :to="`/todayoffer/${id4}`" tag="dt">今晚售完</router-link>
              <dd>今日12点结束</dd>
              <dd>
                <router-link tag="span" :to="`/detail/${item._id}`" v-for="(item,i) in toNight" :key="i">
                  <img :src="item.coverImg"/>
                </router-link>
              </dd>
            </dl>
          </div>
          
        </div>
         <div class="good-rep">
            <h2>到店自取</h2>
            <router-link class="more" tag="p" to="/selftake/5dbc197d440b810ee8ed76a4">查看更多&nbsp;&gt;</router-link>
           
        </div>
          <div class="good-shop">
            <router-link tag="div"  :to="`/selftake/${id5}`" class="one_shop" v-for="(item,i) in toShop" :key="i" > 
             <van-image width="60" 
             fit="cover"
            :src="item.coverImg"/>
              <div class="delright">
                <h2>{{item.name}}</h2>
                <p>{{item.quantity}}千米</p>
                <p>{{item.descriptions}}</p>
              </div>
            </router-link>
          </div>
          <ul class="title2">
            <li><a href="
          ">推荐店铺</a></li>
          <li><a href="">今日特卖</a></li>
          </ul>
          <div class="filter">
        <van-dropdown-menu>
             <van-dropdown-item v-model="value" :options="option" />
             <van-dropdown-item title="筛选" ref="item">
               <van-switch-cell v-model="switch1" title="包邮" />
               <van-switch-cell v-model="switch2" title="团购" />
               <van-button block type="info" @click="onConfirm">确认</van-button>
             </van-dropdown-item>
        </van-dropdown-menu>
        </div>
         <div class="more-shop">
            <div class="one-shop" v-for="(item,i) in toShop" :key="i">
                <img  class="logo" :src="item.coverImg" alt="">
                <div class="detail">
                    <h2>{{item.name}}</h2>
                    <p>
                        <span>月售{{item.quantity}}</span>
                        <span>{{item.quantity/40}}分钟&nbsp;&nbsp;&nbsp;{{item.quantity/800}}km</span>
                    </p>
                    <p><span>起送￥10</span><span>配送￥2</span></p>
                    <p><span>生鲜</span><router-link :to="'/superm_shop/'+shopId[i].id" tag="span">进店</router-link></p>
                    <div class="pic">
                        <dl v-for="(val,i) in shopProducts[i]" :key="i">
                            <router-link :to="'/detail/'+val._id">
                              <img style="width:100%;" :src="val.coverImg">
                            </router-link>
                            <dd class="van-ellipsis">{{val.name}}</dd>
                            <dd><span><b>￥{{val.price}}</b>/个</span><p>￥{{parseInt(val.price/10)}}</p></dd>
                        </dl>
                    
                    </div>
                </div>
            </div>
         </div>   
      </main>
      <footer></footer>
  </div>
</template>

<script>
import { Icon } from 'vant';
import 'vant/lib/icon/local.css';
import * as getProlist from '@/api/getProlist'
import * as cart from '@/api/cart'
export default {
    name:'Home',
    data(){
      return{
        value1:0,
        value:'',
        value:0,
        title:'首页',
        switch1: false,
        switch2: false,
        option1: [
          { text: '品质店铺', value: 0 },
          { text: '新款商品', value: 1 },
          { text: '活动商品', value: 2 }
        ],
        option: [
          { text: '全部商品', value: 0 },
          { text: '新款商品', value: 1 },
          { text: '活动商品', value: 2 }
        ],
        option3: [
          { text: '郑州高新区', value: 0 },
          { text: '郑州二七区', value: 1 },
          { text: '郑州金水区', value: 2 }
        ],
        categoryList:[],
        specialToday:[],
        categoryShop:[],
        prolists:[],
        specials:[],
        lows:[],
        shops:[],
        toNight:[],
        id1:'',
        id2:'',
        id3:'',
        id4:'',
        id5:'',
        toShop:[],
        shopProducts:[],
        shopId:[]
      }
    },
    methods:{
       onConfirm() {
      this.$refs.item.toggle();
    },
    
    addcart(v){
      this.$toast('亲,已经添加购物车，请前往购物车')
      console.log(v)
      let id=v;
      cart.addCart({product:id,quantity:1}).then((data)=>{
        console.log(data.data)
      })
      
    }
    },
    mounted(){
      this.$emit('toparent',[this.title,0])
      this.categoryList = this.$store.state.categoryList
      let id='5dbc18b5440b810ee8ed769f';
      getProlist.getProlist({
        product_category:id,
      }).then(data=>{
        console.log(data.data.products)
        this. specialToday=data.data.products
      })
      this.categoryShop=this.$store.state.categoryShop
      getProlist.getProlist({
        product_category:'5dbc18cf440b810ee8ed76a0',
        per:2,
      }).then(data=>{
        this.specials=data.data.products
        this.id1=data.data.products[0].productCategory
      })
      getProlist.getProlist({
        product_category:'5dbc18d4440b810ee8ed76a1',
        per:2,
      }).then(data=>{
        console.log(data.data.products[0].productCategory)
        this.lows=data.data.products
         this.id2=data.data.products[0].productCategory
     
      })
      getProlist.getProlist({
        product_category:'5dbc1969440b810ee8ed76a2',
        per:2,
        page:2,
      }).then(data=>{
        this.shops=data.data.products
        this.id3=data.data.products[0].productCategory
        console.log(this.id3)
      })
      getProlist.getProlist({
        product_category:'5dbc1975440b810ee8ed76a3',
        per:2,
      }).then(data=>{
        console.log(data.data.products[0].productCategory)
        this.toNight=data.data.products
         this.id4=data.data.products[0].productCategory
         console.log(this.id4)
      })
      getProlist.getProlist({
        product_category:'5dbc197d440b810ee8ed76a4',
        per:5,
        }).then(data=>{
          console.log(data.data.products[0].productCategory)
          this.toShop=data.data.products
          this.id5=(data.data.products[0].productCategory)
          console.log(this.id5)
      })
      this.shopId = this.$store.state.shops
      this.$store.state.shops.map(v=>{
        getProlist.getProlist({
          product_category:v.id,
          per:3,
          }).then(data=>{
            this.shopProducts.push(data.data.products)
        })
      })
    }
}
</script>

<style scoped>
.sousuo{
  
  height: 25px;
  border-radius: 14px 0 14px 0;
  background: #74BA42;
  
}
main .local{
  margin-top: 10px;
}
.sousuo >>> .van-ellipsis{
  color: #fff ;
  font-size:6px;
  transform:scale(.95);
  margin-top:-2px;
}
.sousuo >>> .van-dropdown-menu__title::after{
  color:#fff
}
.big_sales{
  margin-top:16px;
  width:100%;
  border-radius:10px;
  box-shadow:0 0 10px #ddd;
}
.big_sales img{
  width:100%;
}

.big_sales div{
  display: flex;
}
.big_sales div dl{
  flex:1;
  padding:10px;
}
.big_sales div dl:nth-of-type(2n+1){
  border-right:1px solid #eee;
}
.big_sales div dl dt{
  font-size:22px;
  line-height:24px;
}
.big_sales div dl dd:nth-of-type(1){
  color:#FB6532;
  font-size:14px;
  margin-bottom:10px;
}
.big_sales div dl dd:nth-of-type(2){
  display:flex;
}
.big_sales div dl dd:nth-of-type(2) span:nth-of-type(1){
  margin-right:4px;
}
.big_sales div dl dd:nth-of-type(2) span{
  display: block;
  flex:1;
  height: 70px;
  padding-bottom: 6px;
  overflow:hidden;
}
.big_sales div dl dd:nth-of-type(2) span img{
  text-align: center;
}
.big_sales div .shops dd:nth-of-type(2) span img{
  transform:scale(1.5)
} 
.big_sales div .shops dd:nth-of-type(2) span:nth-child(2) img{
  transform:scale(1.2)
} 
.big_sales .top_1{
  border-bottom:1px solid #eee;
}

 main{
   overflow: auto;
   padding: 20px;
   position: relative;
   padding-top:20px;
 }
 main .home_ser{
   box-sizing: border-box;
 }
 main .home_ser .moreAdd{
   position: absolute;
   left: 320px;
   top:10px;
   font-size: 28px;
   background: #fff
 }
main .local{
  position: absolute;
  display: block;
  width: 118px;
  height: 28px;
  top: 8px;
  left: 20px;
  background:#eee;
  border-radius: 10px 0 10px 10px;
}
main .search{
    width:335px;
    height: 28px;
    margin-top: 36px ;
    background:#eee;
    border: none;
    text-align: center;
    font-size: 14px;
    color: #101010 
}
main .van-swipe-item{
    margin-top: 16px
}
main .van-swipe-item img{
  background-size:100%;
  width:100%;
  height: 111px; 
}
main .category{
  display: flex;
  height: 154px;
  flex-wrap: wrap; 
  margin-top: 20px;
  justify-content: space-between; 
  align-content: space-between;

}

.category figure{
  width: 55px;
  border:1px solid transparent;
  text-align: center;
  font-size: 12px;
  color: #666666;
  float: left;
  margin: 0;
  
}
.category figure img{
  display: block;
  width: 44px;
  height: 44px;
  margin: auto;
  margin-bottom: 5px;
  border-radius: 50%;
}
main .memberCard{
  display: flex;
  margin-top: 16px;
}
main .memberCard .card_left{
  width:204px;
  height:72px;
  background:url(../images/vip_1.png);
}

main .memberCard img{
  margin-left: 6px;
  width:123px;
  height:80px;
}
main .specialOffer{
  box-sizing: border-box;
  height: 179px;
  padding: 6px 14px;
  margin-top: 23px;
  border-radius:10px;
  box-shadow:0 0 15px #ddd;

}
main .specialOffer .title{
  display: flex;
  line-height:32px;
  margin-bottom: 10px;
}                                                            
main .specialOffer .title h2{
  float: left;
  font-size: 16px;
  color: #333333;
}
main .specialOffer .title p{
  margin-left: 170px;
  font-size:14px;
  color:#999;
}
main .specialOffer .title-content{
  display: flex;
  overflow: auto;
  padding-bottom:10px;
}
main .specialOffer .title-content dl{
  width: 80px;
  margin-right: 12px
}
main .specialOffer .title-content dl dt{
  width: 80px;
  height: 60px;
  background: #eee;
}
main .specialOffer .title-content dl dd:nth-of-type(1){
  color: #333;
  font-size: 12px;
  line-height: 17px;
  margin-top:4px;
}
main .specialOffer .title-content dl dd:nth-of-type(2){
  color: #999;
  font-size: 10px;
  line-height: 14px;
  margin-bottom: 8px;
}
main .specialOffer .title-content dl dd:nth-of-type(3){
  font-size: 10px;
  position: relative;
}
main .specialOffer .title-content dl dd:nth-of-type(3) b{
  font-size: 14px;
  color: #FB6532;
}
.van-icon{
  position:absolute;
  left:56px;
  top:2px;
  display:block;
  font-size:24px;
  color:rgb(56, 230, 26);
  background:#fff;
}
.title-content::-webkit-scrollbar {display:none}
main .good-rep{
    margin: 20px 0 10px 0;
    display: flex;
    height: 22px;
}
main .good-rep h2{
    font-size: 16px;
    color: #333;
}
.more{
    font-size: 14px;
    color:#999;
    margin-left:190px;
    margin-right: 10px
}

main .good-shop{
    min-height:75px; 
    width:100%; 
    overflow: auto;
    display: flex;
    padding:0 5px 10px;
    box-sizing:border-box;
}
main .good-shop .one_shop{
    margin-right: 10px;
    height: 100%;
    flex-shrink: 0;
    display: flex;
    padding-right: 10px;
    box-sizing: border-box;
    margin-top:10px;
    border-radius:4px;
    box-shadow:0 0 10px #e0e0e0;
}
main .good-shop .one_shop .van-image{
    background: red;
    margin-right: 10px;
}
main .good-shop .one_shop .delright{
  margin: 10px 10px 15px 0
}
main .good-shop .one_shop .delright h2{
    font-size: 14px;
    color: #333;
    line-height: 20px;
}
main .good-shop .one_shop .delright p:nth-of-type(1){
    font-size: 10px;
    color: #fff;
    line-height: 20px;
    background: #66B32E;
    display:inline-block;
    padding:2px 4px;
    border-radius:2px;
    margin:2px 0 ;

}
main .good-shop .one_shop .delright p:nth-of-type(2){
    font-size: 10px;
    color: #666;
    line-height: 19px;
}

.good-shop::-webkit-scrollbar {display:none}
main .title2{
  display: flex;
  height: 22px;
  margin-top:24px;
}
main .title2 li{
  margin-right: 20px;
}
main .title2 li a{
  font-size: 16px;
  color: #333;
}
main .more-shop .one-shop{
    height: 260px;
    /* background: #efefef; */
    display: flex;
    padding: 15px 0 12px 0;
    box-sizing: border-box;
    margin-bottom: 17px;
    border-top: 1px solid #eee
}
main .more-shop .one-shop .logo{
    width:67px;
    height:64px;
    border-radius: 10px;
    margin-right:10px 
    
}
main .more-shop .one-shop:nth-of-type(1) .logo{
  transform:scale(1.2)
}
main .more-shop .one-shop:nth-of-type(5) .logo{
  transform:scale(1.2)
}
main .more-shop .one-shop:nth-of-type(2) .logo{
  transform:scale(2)
}
main .more-shop .one-shop .detail{
  border-bottom: 1px solid #eee;
  position: relative; 
}
main .more-shop .one-shop .detail h2{
    font-size: 16px;
    line-height: 22px;
    color: #333
} 
main .more-shop .one-shop .detail p:nth-of-type(1){
    display: flex;
} 
main .more-shop .one-shop .detail p span{
    color: #666
}
main .more-shop .one-shop .detail p:nth-of-type(1) span:nth-child(1){
    display: block;
    font-size: 12px;
    line-height: 17px;
    width:170px;
} 
main .more-shop .one-shop .detail p:nth-of-type(1) span:nth-child(2){
    display: block;
    font-size: 10px;
    line-height: 14px;
}
main .more-shop .one-shop .detail p:nth-of-type(2){
    display: flex
}

main .more-shop .one-shop .detail p:nth-of-type(2) span:nth-child(1){
    display: block;
    font-size: 12px;
    line-height: 17px;
    margin-right: 20px;
    display: flex
}
main .more-shop .one-shop .detail p:nth-of-type(3) {
    height: 21px;
    box-sizing: border-box;
    display: flex;
}
main .more-shop .one-shop .detail p:nth-of-type(3) span:nth-child(1) .shop-pic{
    font-size: 18px;
    padding-top: 5px
}
main .more-shop .one-shop .detail p:nth-of-type(3) span:nth-child(1){
    font-size:12px;
}
main .more-shop .one-shop .detail p:nth-of-type(3) span:nth-child(2){
    font-size:12px;
    margin-left: 165px;
    display: block;
    color: #fff;
    border-radius: 21px;
    background: #66B32E;
    padding: 2px 13px;
    text-align: center;
}
main .detail .pic{
    display: flex;
    margin-top: 14px;
    overflow:auto;
   
}

main .detail .pic dl{
    width:80px;
    min-height: 125px;
    background: #fff;
    box-shadow: 0 0 5px #eee;
    overflow: hidden;
}
main .detail .pic dl:nth-of-type(2){
   margin:0 10px
}
main .detail .pic dl dt{
    min-height:62px;
    overflow: hidden;
    /* background: rgb(87, 76, 76); */
    margin-bottom: 8px
}
main .detail .pic dl dd:nth-of-type(1){
    line-height: 17px;
    font-size: 12px;
    color: #333;
    margin-bottom: 7px
}
main .detail .pic dl dd:nth-of-type(2){
    display: flex;
    font-size: 12px;
    color: #333;
    line-height: 19px; 
}
main .detail .pic dl dd:nth-of-type(2) b{
   color: #FB6532;

} 
main .detail .pic dl dd:nth-of-type(2) span{
   margin-right: 10px;
   overflow: hidden;

} 
</style>